<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://www.codecoord.com" %>
<!DOCTYPE html>
<html lang="en" class="fly-html-layui fly-html-store">
<head>
        <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${APP_PATH}/statics/front/layui/dist/css/layui.css">
    <link rel="stylesheet" href="${APP_PATH}/statics/front/css/global.css" charset="utf-8">
    <link rel="stylesheet" href="${APP_PATH}/statics/front/css/global(1).css" charset="utf-8">
    <link rel="stylesheet" href="${APP_PATH}/statics/front/css/store.css" charset="utf-8">
    <link rel="icon" href="${APP_PATH}/statics/front/images/favicon.ico">
    <title>shop商城</title>
<body>
<!-- 顶部start -->
<div class="layui-header header header-store" style="background-color: #393D49;">
    <div class="layui-container">
        <a class="logo" href="index.html">
            <img src="${APP_PATH}/statics/front/images/logo.png" alt="layui">
        </a>
        <div class="layui-form component" lay-filter="LAY-site-header-component"></div>
        <ul class="layui-nav" id="layui-nav-userinfo">
            <li data-id="index" class="layui-nav-item layui-hide-xs "><a class="fly-case-active" data-type="toTopNav"
                                                                         href="/index.html">首页</a></li>
            <li data-id="room" class="layui-nav-item layui-hide-xs  layui-this"><a class="fly-case-active"
                                                                       data-type="toTopNav"
                                                                       href="/items/list.html">商品类型</a></li>
            <li data-id="register" class="layui-nav-item layui-hide-xs "><a class="fly-case-active" data-type="toTopNav"
                                                                            href="/notice.html">商城公告</a></li>
            <li data-id="login" class="layui-nav-item layui-hide-xs"><a class="fly-case-active" data-type="toTopNav"
                                                                                   href="/login.jsp">登入</a></li>
            <li data-id="register" class="layui-nav-item layui-hide-xs "><a class="fly-case-active" data-type="toTopNav"
                                                                            href="/register.jsp">注册</a></li>
            <li data-id="register" class="layui-nav-item layui-hide-xs "><a class="fly-case-active" data-type="toTopNav"
                                                                            href="/user/toUser.html">个人中心</a></li>
            <span class="layui-nav-bar" style="left: 560px; top: 55px; width: 0px; opacity: 0;"></span></ul>
    </div>
</div>

<!-- 中间区域开始 -->
<div class="shop-nav shop-index">
    <!--搜索 start-->
    <div id="LAY-topbar" style="height: auto;">
        <div class="input-search">
            <div id="searchItems">
                <input type="text" placeholder="搜索你需要的商品" name="productName" id="productNameId"
                       autocomplete="off" value="">
                <button class="layui-btn layui-btn-shop" style="background-color: #009688">
                    <i class="layui-icon layui-icon-search"></i>
                </button>
            </div>
            <div class="layui-container layui-hide-xs"><a href="#" class="topbar-logo">
                <img src="${APP_PATH}/statics/front/images/logo-1.png" alt="layui"> </a></div>
        </div>
    </div>
    <!--搜索 end-->
</div>
<!-- 中间区域结束 -->

<!-- 商品详情start -->
<div class="layui-container shopdata">
    <div class="layui-card shopdata-intro">
        <div class="layui-card-header">
				<span class="layui-breadcrumb layui-hide-xs" style="visibility: visible;">
				<a href="../shop/index.html">商城首页</a><span lay-separator="">/</span>
						           <a href="JavaScript:void(0);" id="categoryNumber">${items.productName}</a><span lay-separator="">/</span>

						 <a><cite>商品详情</cite></a> </span>
        </div>
        <div class="layui-card-body layui-row">
            <div class="layui-col-md6">
                <div class="intro-img photos"> <img id="coverImg" src="/shop/show/${items.photo}" alt="商品封面" layer-index="0"> </div>
            </div>
            <div class="layui-col-md6">
                <div class="intro-txt">
                    <h1 class="title" id="roomName">${items.typeName}</h1>
                    <input type="hidden" id="id" name="id" value="1">
                    <div class="store-attrs">
                        <div class="summary">
                            <p class="reference">商品名称:<span id="itemsName">${items.productName}</span></p>
                            <p class="reference">商品号:<span id="roomNumber">${items.id}</span></p>
                            <p class="reference">库存:<span id="bedType">${items.liveNum}</span></p>
                            <p class="reference">商品价格:￥<span id="standardPrice">${items.price}</span></p>
                            <p class="activity">会员价:<strong class="price"><i>￥</i><span id="memberPrice">${items.price-60}</span></strong></p>
                        </div>
                    </div>

                    <p class="store-detail-active" id="shopEvent">
                        <%-- 隐藏域，保存当前登录用户的ID值 --%>
                        <input type="hidden" id="currentUserId" value="${sessionScope.currentUser.id}">
                        <%-- 隐藏域，保存房间价格 --%>
                        <input type="hidden" id="price" value="${items.price}">
                        <c:if test="${items.liveNum!=0}">
                            <a href="javascript:;" id="bookRoomBtn" data-type="memberReserveHotel" class="store-bg-green fly-memberReserveHotel">
                            <i class="layui-icon layui-icon-dollar"></i>立即预订 </a>
                        </c:if>
                        <c:if test="${items.liveNum==0}">
                            <a href="javascript:;" id="bookRoomBtn2" data-type="memberReserveHotel" class="store-bg-orange fly-memberReserveHotel">
                                <i class="layui-icon layui-icon-dollar"></i>立即预定 </a>
                        </c:if>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-card shopdata-content">
        <div class="layui-card-body detail-body layui-text">
            <div class="layui-elem-quote">商品类型:${items.typeName}</div>
            <div id="roomContent">
                ${items.remark}
            </div>
        </div>
    </div>
</div>
<!-- 商品详情end -->

<%-- 预订商品窗口 --%>
<div style="display: none;padding: 5px" id="orderRoomWindow">
    <form class="layui-form" style="width:90%;" id="dataFrm" lay-filter="dataFrm">
        <%-- 添加3个隐藏域，分别保存用户ID、房间ID、房型ID --%>
        <input type="hidden" name="accountId" value="${sessionScope.currentUser.id}">
        <input type="hidden" name="goodsId" value="${items.id}">
        <input type="hidden" name="categoryId" value="${items.typeId}">
        <div class="layui-form-item">
            <label class="layui-form-label">预订日期</label>
            <div class="layui-input-block">
                <input type="text" id="book_date" lay-verify="required" autocomplete="off"  name="reserveDate" placeholder="请选择预订日期"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">购买数量</label>
                <div class="layui-input-inline">
                    <input type="text" name="counts" id="counts" lay-verify="required" placeholder="购买数量"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">商品总价</label>
                <div class="layui-input-inline">
                    <input type="text" name="reservePrice" id="reservePrice" lay-verify="required"  readonly placeholder="商品总价格自动计算"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">购买人姓名</label>
                <div class="layui-input-inline">
                    <input type="text" name="reservationName" lay-verify="required"  placeholder="请输入预订人姓名"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">预订电话</label>
                <div class="layui-input-inline">
                    <input type="text" name="phone" lay-verify="required"  placeholder="请输入预订人电话"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea class="layui-textarea" name="remark" id="content"></textarea>
            </div>
        </div>
        <div class="layui-form-item" style="margin-left: 80px">
            <span style="color: red;font-size: 16px;">预订须知：需等待后台人员确定订单,需等两到三天</span>
        </div>
        <div class="layui-form-item layui-row layui-col-xs12">
            <div class="layui-input-block" style="text-align: center;">
                <button type="button" class="layui-btn" lay-submit lay-filter="doSubmit"><span
                        class="layui-icon layui-icon-add-1"></span>提交
                </button>
                <button type="reset" class="layui-btn layui-btn-warm"><span
                        class="layui-icon layui-icon-refresh-1"></span>重置
                </button>
            </div>
        </div>
    </form>
</div>

<!-- 底部 -->
<div class="fly-footer">
    <p><a href="#">shop商城</a> 2021 © <a href="#">test.cn</a></p>
    <p>
        友情链接
        <a href="http://java.goodym.cn" target="_blank">java项目源码分享网</a>
        <a href="http://www.goodym.cn/code/list/all/1/20.html" target="_blank">源码下载平台</a>
        <a href="http://www.goodym.cn/market/list/all/1/20.html" target="_blank">源码市场</a>
        <a href="http://www.goodym.cn/resumetemplate/list/1/20.html" target="_blank">简历制作</a>
        <a href="http://www.goodym.cn/forum/list/0/1/20.html" target="_blank">社区论坛</a> </p>

</div>


<!-- 脚本开始 -->
<script src="${pageContext.request.contextPath}/statics/front/layui/dist/layui.js"></script>
<script src="${APP_PATH}/statics/echarts/jquery-3.1.1.min.js"></script>
<script>
    layui.use(["form","element","carousel","layer","laydate"], function () {
        var form = layui.form,
            layer = layui.layer,
            element = layui.element,
            carousel = layui.carousel,
            laydate = layui.laydate,
            $ = layui.$;

        //渲染轮播图
        carousel.render({
            elem: '#LAY-store-banner'
            ,width: '100%' //设置容器宽度
            ,height: '460' //设置容器高度
            ,arrow: 'always' //始终显示箭头
        });

        //渲染日期范围组件
        laydate.render({
            elem: '#book_date',
            done:function () {
                var counts = $("#counts").val();
                var price  = counts * $("#price").val();
                //赋值价格
                $("#reservePrice").val(price);
            }
        });

        var mainIndex;
        //点击立即预订按钮触发点击事件
        $("#bookRoomBtn").click(function () {
            //获取隐藏域中的用户ID值
            var userId = $("#currentUserId").val();
            //判断用户是否已经登录
            if(userId=="" || userId.length==0){
                //layer.alert("您还没有登录，请先登录！");
                alert("您还没有登录，请先登录！")
                location.href="/login.jsp";
            }
            //打开预订房间窗口
            mainIndex = layer.open({
                type: 1,//打开类型
                title: "预订商品",//窗口标题
                area: ["800px", "550px"],//窗口宽高
                content: $("#orderRoomWindow"),//引用的内容窗口
                success: function () {
                    //清空表单数据
                    $("#dataFrm")[0].reset();
                },
            });
        });


        $("#bookRoomBtn2").click(function () {
            layer.alert("该商品已售完",{icon:5});
        });

        //监听表单提交事件
        form.on("submit(doSubmit)",function (data) {
            console.log(data.field)
            $.post("/orders/addOrders",data.field,function(result){
                if(result.success){
                    layer.alert(result.message,{icon:6});
                    //关闭窗口
                    layer.close(mainIndex);
                    //刷新页面
                    window.location.reload();
                }else{
                    layer.alert(result.message,{icon:5});
                }
            },"json");

            return false;
        });
    });
    window.onload=function(){
        //搜索
        $("button").click(
                function() {
                    var name = $("#productNameId").val()
                    console.log(name)
                    location.href = "/items/goods/" + name;
                }
        )
    }
</script>
<!-- 脚本结束 -->
<ul class="layui-fixbar">
    <li class="layui-icon layui-fixbar-top" lay-type="top" style=""></li>
</ul>
<div class="layui-layer-move"></div>

</body>
</html>
